<script setup>

import { ref, computed } from 'vue';
import {
    CheckOutlined,
} from "@ant-design/icons-vue";

const props = defineProps({
    aiModelList: {
        type: Array,
        default: () => []
    },
    showSelect: {
        type: Boolean,
        default: false
    }
})
const modelId = ref('')
const more = ref(false)

// 加载更多按钮
const showMore = () => {
    more.value = !more.value
}

// 初始选择的id
const checkedFn = (id) => {
    modelId.value = id
}

const requestData = computed(() => {
    let feature_id = props.aiModelList.find(ele => ele.id == modelId.value)?.feature_id
    return {
        modelId: modelId.value,
        feature_id: feature_id || '',
    }
})

// 当前选择的风格名称
const selectCart_name = computed(() => {
    return props.aiModelList.find(ele => ele.id == modelId.value)?.name
})

defineExpose({
    requestData,
    checkedFn,
    selectCart_name
})

</script>

<template>
    <div class="content_item_box_ai_illustration">
        <!-- <span class="title">AI配图</span> -->
        <div class="ai_illustration" :style="{
            height: more ? 'auto' : '112px'
        }">
            <div class="style_item" :class="{
                'active_select': modelId == i.id
            }" v-for="i in props.aiModelList" :key="i.id" @click="modelId = i.id">
                <div class="isSelect" v-show="modelId == i.id">
                    <CheckOutlined :style="{
                        'font-weight': 900
                    }" />
                </div>
                <img :src="i.example_img" alt="">
                <span class="desc">{{ i.name }}</span>
            </div>
        </div>
        <a-button type="dashed" style="margin: 15px 0 20px;" @click="showMore" v-show="props.aiModelList.length > 6">
            {{ !more ? '展开更多' : '收起更多' }}
            <span v-show="!!selectCart_name && props.showSelect">(当前选择风格：{{ selectCart_name }})</span>
        </a-button>
    </div>
</template>


<style lang="less" scoped>
// 智能生图模型列表
.content_item_box_ai_illustration {
    display: flex;
    flex-direction: column;

    .ai_illustration {
        width: 99%;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 15px;
        overflow-y: auto;

        &::-webkit-scrollbar {
            width: 8px;
            /* 滚动条的宽度 */
            height: 10px;
            /* 滚动条的高度，垂直滚动条可能用得上 */
        }

        &::-webkit-scrollbar-thumb {
            background: #888;
            /* 滑块的背景颜色 */
            border-radius: 10px;
            /* 滑块的圆角 */

        }

        .style_item {
            width: 100px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 5px;
            cursor: pointer;
            position: relative;

            &:hover {
                & img {
                    border-color: var(--ss-primary-6);
                }
            }

            &.active_select {
                img {
                    border-color: var(--ss-primary-6);
                }
            }

            .desc {
                font-size: 12px;
                color: rgb(54, 54, 54);
                // 单行显示 溢出隐藏
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            img {
                height: 88px;
                width: 100%;
                border-radius: 6px;
                overflow: hidden;
                object-fit: cover;
                border: 1px solid transparent;
            }

            .isSelect {
                position: absolute;
                top: 5px;
                right: 5px;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 19px;
                height: 19px;
                color: #fff;
                font-weight: 900;
                background-color: var(--ss-primary-6);
            }

        }
    }

}
</style>